<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org" ;>

    <head>
        <meta charset="UTF-8">
        <title>出车记录</title>
        <meta name="renderer" content="webkit">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <!--<meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />-->

        <link rel="stylesheet" href="../../static/css/font.css">
        <link rel="stylesheet" href="../../static/css/xadmin.css">
        <script src="../../static/lib/layui/layui.js"></script>
        <script src="../../static/js/xadmin.js"></script>
        <script src="../../static/js/jquery.min.js"></script>
        <script type="text/javascript">

            /*$("#dataDownload").on('click',function () {
                //获取月份
                var month = $('#vMonth').val();
                var vName = $('#vName').val();
                var vWorkNumber = $('#vWorkNumber').val();
                var vDept = $('#vDept option:selected').val();
                if(month===null|month===''|month===undefined){
                    alert("请先选择月份!");
                    return false;
                }else {
                    console.log(month);
                    window.location.href = "${ctx}/leaveCount/export.shtml?vMonth="+month+"&vName="+vName+"&vWorkNumber="+vWorkNumber+"&vDept="+vDept;
                }

            });*/
            $(function () {
                $('#js-export').click(function(){
                    var chuCheDeptId=$('#chuCheDeptId').val();
                    var chucheuseManId=$('#chucheuseManId').val();
                    var chuchecarId=$('#chuchecarId').val();
                    var chuchedriverId =$('#chuchedriverId').val();
                    var startTime=$('#startTime').val();
                    var endTime=$('#endTime').val();
                    window.location.href="/chucheExport?chuCheDeptId="+chuCheDeptId+"&chucheuseManId="+chucheuseManId+"&chuchecarId="+chuchecarId+"&chuchedriverId="+chuchedriverId+"&startTime="+startTime+"&endTime="+endTime;
                });
            })
        </script>
        <style th:inline="none">
            body{overflow-y: scroll;}
        </style>
    </head>

    <body>
        <div class="layui-fluid">
            <div class="layui-row layui-col-space15">
                <div class="layui-col-md12">
                    <div class="layui-card">
                        <div class="layui-card-body ">
                            <div class="layui-form">
                                <div class="layui-input-inline layui-show-xs-block">
                                    <select class="layui-input" id="chuCheDeptId" name="chuCheDeptId"  lay-filter="chuCheDeptId">
                                        <option value="">请选择部门</option>
                                        <option  th:each="deLi:${deptList}" th:value="${deLi.departmentNum}" th:text="${deLi.departmentName}"></option>
                                    </select>
                                </div>
                                <div class="layui-input-inline layui-show-xs-block" id="chuchediv">
                                    <!--<input type="text" id="chucheuseManId" class="layui-inpu" name="chucheuseManId">-->
                                    <select id="chucheuseManId" class="layui-inpu" name="chucheuseManId"   lay-verify="required">
                                        <option value="">请选择用车人</option>
                                    </select>
                                </div>
                                <div class="layui-input-inline layui-show-xs-block">
                                    <select id="chuchecarId"  class="layui-inpu" name="chuchecarId"  >
                                        <option value="">请选择车牌号</option>
                                        <option  th:each="CarLi:${carList}" th:value="${CarLi.carId}" th:text="${CarLi.carNo}"></option>
                                    </select>
                                </div>
                                <div class="layui-input-inline layui-show-xs-block">
                                    <select class="layui-input" name="chuchedriverId" id="chuchedriverId">
                                        <option value="">请选择驾驶员</option>
                                        <option  th:each="li:${driverList}" th:value="${li.driverId}" th:text="${li.driverName}"></option>
                                    </select>
                                </div>
                                <div class="layui-input-inline layui-show-xs-block">
                                    <input class="layui-input" placeholder="开始日" name="chuchestartTime" id="startTime"></div>
                                <div class="layui-input-inline layui-show-xs-block">
                                    <input class="layui-input" placeholder="截止日" name="chucheendTime" id="endTime"></div>

                                <div class="layui-input-inline layui-show-xs-block">
                                    <button class="layui-btn"  data-type="reload">
                                        <i class="layui-icon">&#xe615;</i></button>
                                </div >
                            </div>

                            <div class="layui-input-inline layui-show-xs-block">
                                <button class="layui-btn" id="js-export">
                                    导出Execl表格
                                </button>
                            </div>
                        </div>
                        <table class="layui-table layui-form"  id="paicherecord" lay-filter="test" >
                        </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </body>
<script th:inline="none">

    layui.use(['table'], function() {
        var laypage = layui.laypage
            ,table =layui.table;
        table.render({
            elem: '#paicherecord'
            ,method:'POST'
            ,height: 600
            ,even: true
            ,url: '/chucheSelectRecords' //数据接口
            ,title: '出车统计'
            ,page: true //开启分页
            ,id:'testReload'
            ,cols: [[ //表头
                {field: 'carNo', title: '车牌号', width:150,align:'center'}
                ,{field: 'carType', title: '车辆类型', width:150,align:'center'}
                ,{field: 'useMan', title: '用车人', width: 150, align:'center'}
                ,{field: 'driverName', title: '驾驶员', width: 150, align:'center'}
                ,{field: 'destination', title: '目的地', width:150,align:'center'}
                ,{field: 'cause',title: '任务内容', width: 200, align:'center'}
                ,{field: 'storageTime', title: '实际出厂时间', width:180,align:'center'}
                ,{field: 'returnTime', title: '实际返厂时间', width: 180, align:'center'}
                //,{field: 'mileage', title: '行驶里程', width:150,align:'center'}
                //,{field: 'drivingTime', title: '行驶时间', width: 150, align:'center'}
            ]]
        });

        var $ =layui.$;
        $('.layui-form .layui-btn').on('click', function(){
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });

              active ={reload:function() {
                    var chuCheDeptId =$('#chuCheDeptId');
                    var chucheuseManId=$('#chucheuseManId');
                    var chuchecarId=$('#chuchecarId');
                    var chuchedriverId =$('#chuchedriverId');
                    var startTime=$('#startTime');
                    var endTime=$('#endTime');
                    table.reload('testReload', {
                        where: { //设定异步数据接口的额外参数
                                chuCheDeptId: chuCheDeptId.val(),
                                chucheuseManId: chucheuseManId.val(),
                                chuchecarId: chuchecarId.val(),
                            chuchedriverId: chuchedriverId.val(),
                            chuchestartTime: startTime.val(),
                            chucheendTime: endTime.val()
                        }
                    })
                }
              }
    })

        layui.use(['layer', 'jquery', 'form'], function () {
        var layer = layui.layer,
            $ = layui.jquery,
            form = layui.form;

        form.on('select(chuCheDeptId)', function (data) {
            console.log(data);
            var deptId=data.value;
            if(deptId==="请选择部门"){
                deptId=null;
            }
            $.ajax({
                url: '/selectManByDept?deptId='+deptId,
                dataType: 'json',
                type: 'get',
                success: function (data) {
                    $('#chucheuseManId').html('<option value="">请选择用车人</option>');
                    $.each(data.data, function (index, item) {

                        $('#chucheuseManId').append(new Option(item.useName, item.driverId));// 下拉菜单里添加元素
                    });

                    //重新渲染 固定写法
                    layui.form.render("select");
                }
            })
        });
    });

    layui.use(['laydate', 'form'],
        function() {
            var laydate = layui.laydate;

            //执行一个laydate实例
            laydate.render({
                elem: '#startTime', //指定元素
                //type:'datetime', // 可选择：年、月、日、时、分、秒
                //format: 'yyyy-MM-dd HH:mm:ss', //指定时间格式
            });

            //执行一个laydate实例
            laydate.render({
                elem: '#endTime', //指定元素
               // type:'datetime', // 可选择：年、月、日、时、分、秒
                //format: 'yyyy-MM-dd HH:mm:ss', //指定时间格式
            });
        });
</script>
</html>
